@import "calypso/my-sites/stats/modernized-stats-table-styles";

.stats__all-time-views-section {
	.highlight-cards-list {
		display: block;
	}

	.highlight-card-heading {
		flex-wrap: wrap;
		gap: 8px 16px;
	}

	.segmented-control {
		margin-left: auto;
	}
}

// TODO: Consolidate the overlay styles back into the highlight card component.

.highlight-card {
	&.highlight-card--has-overlay {
		.highlight-card-content {
			filter: blur(10px);
		}
	}

	.stats-card-upsell {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 1;
	}
}

.highlight-card-heading__title {
	display: flex;
	align-items: center;
	vertical-align: middle;
	gap: 8px;
}
